<template>
  <interval height="120" />
  <info-card
    :introduce="introduce"
    :name="sheetName"
    :coverImgUrl="coverImgUrl"
  />
  <interval height="30" />
  <showcase :title="'`'" :caseList="songList" :isSong="true" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import Interval from '@/components/interval/interval.vue'
import Showcase from '@/components/showcase/showcase.vue'
import InfoCard from '@/components/info-card/info-card.vue'

export default defineComponent({
  components: {
    Interval,
    Showcase,
    InfoCard
  },
  async setup() {
    const route = useRoute()
    const store = useStore()
    await store.dispatch({
      type: 'details/getsheetDetailAction',
      id: route.query.id
    })
    const sheetDetail = store.state.details.sheetDetail
    const songList = sheetDetail.tracks
    const sheetName = sheetDetail.name
    const introduce = {
      playCount: sheetDetail.playCount,
      updateTime: sheetDetail.updateTime
    }
    const coverImgUrl = sheetDetail.coverImgUrl
    return {
      songList,
      sheetName,
      introduce,
      coverImgUrl
    }
  }
})
</script>

<style scoped lang="less">
.sheet-detail {
}
</style>
